﻿//var _ImageSliderSetting = new ImageSliderSetting(3, null);		
//this._TimeOut = timeOut;
function Product(title, description) {
    this.Title = title;
    this.Description = description;
}
//Populate the product objects
var _Products = new Array();
_Products.push(new Product('This is the first (1) product', 'This is the description of the first(1) product'));
_Products.push(new Product('This is the second (2) product', 'This is the description of the second(2) product'));
_Products.push(new Product('This is the third (3) product', 'This is the description of the third(3) product'));
_Products.push(new Product('This is the fourth (4) product', 'This is the description of the fourth(4) product'));
_Products.push(new Product('This is the fifth (5) product', 'This is the description of the fifth(5) product'));


var _Images; // = images;
var _ImageIndex = 0;
var _TimeOut = 5; //Should be given in seconds
var _TimeOutValue = 0.0;
var _HasPaused = false;

function LoadImages() {
    if (typeof (_Images) == 'undefined' || _Images == null) {
        _Images = new Array();
        $('div#divHidenImageContainer img').each(function (i, imgObj) {
            _Images.push(imgObj.src);
        });
    }
}

function FadeInImage() {
    var images = $('div#divHidenImageContainer img');
    //$('#imgContainer').attr("src", images[_ImageIndex].src).attr("alt", images[_ImageIndex].alt).attr("title", images[_ImageIndex].title);
    $('#divContainer').attr("style", 'background-image: url(' + _Images[_ImageIndex] + ')');

    $('#divImageContainer').fadeIn('slow', AnimationComplete(_ImageIndex));
    /*var product = _Products[_ImageIndex];
    var html = product.Title;
    html = html + '<div class="divImgDescription">' + product.Description + '</div>';
    $('#divToolTipContainer').html(html);*/
}
function AnimationComplete(imageIndex) {
    //alert('AnimationComplete');
    /*$('.SelectedButton').each(function(i, obj) {
    $(obj).attr('class', 'SlideButton');
    });
    var divId = 'divSlide_' + (imageIndex + 1);
    $('#' + divId).attr('class', 'SelectedButton');
    */
}
function FadeOutImage() {
    $('#divImageContainer').fadeOut(500, null);
    //$('#divToolTipContainer').html('');
    setTimeout("FadeInImage()", 400);
    //FadeInImage();	
}
function ChangeImage(imageIndex) {
    if (typeof (imageIndex) == 'undefined')
        _ImageIndex++;
    else {
        _ImageIndex = imageIndex;
        clearTimeout(_TimeOutValue);
    }

    if (_ImageIndex > (_Images.length - 1))
        _ImageIndex = 0;
    FadeOutImage(_ImageIndex);
    if (!_HasPaused)
        _TimeOutValue = setTimeout("ChangeImage()", (_TimeOut * 1000));
    SetSelectedActionButton(_ImageIndex);
}

///Start the Slide Show	
function PlayAnimation(imageIndex) {
    LoadImages();
    if (typeof (imageIndex) == 'undefined' || imageIndex == null)
        setTimeout('ChangeImage()', (_TimeOut * 1000));
    else
        setTimeout('ChangeImage(' + imageIndex + ')', (_TimeOut * 1000));
}
function PauseAnimation() {
    clearTimeout(_TimeOutValue);
    _HasPaused = true;
}
function PlayPauseAnimation(img) {
    //var img = document.getElementById('imgPlayPause');
    if (img.className == 'PauseButton') {
        //img.src = '/Images/slideShow/btnPlay.png';
        img.className = 'PlayButton';
        $(img).attr('alt', 'Play').attr('title', 'Play');
        //img.alt = 'Play'; img.title = 'Play';
        PauseAnimation();
    }
    else {
        //img.src = '/Images/slideShow/btnPause.gif';
        img.className = 'PauseButton';
        //img.alt = 'Pause'; img.title = 'Pause';
        $(img).attr('alt', 'Pause').attr('title', 'Pause');
        _HasPaused = false;
        _ImageIndex++;
        ChangeImage(_ImageIndex);
    }
}
function MoveNext() {
    if (_ImageIndex >= 0 && _ImageIndex < _Images.length) {
        ChangeImage(_ImageIndex + 1);
    }
    else {
        ChangeImage(0);
    }
}
function MovePrevious() {
    if (_ImageIndex > 0 && _ImageIndex < _Images.length) {
        ChangeImage(_ImageIndex - 1);
    }
    else {
        ChangeImage(_Images.length - 1);
    }
}

function SetSelectedActionButton(imageIndex) {
    var value = imageIndex + 1;
    $('.DeSelectedAction, .SelectedAction').each(function () {
        if ($(this).html() == value) {
            $('.DeSelectedAction, .SelectedAction').removeClass('SelectedAction').addClass('DeSelectedAction');
            $(this).removeClass('DeSelectedAction');
            $(this).addClass('SelectedAction');
            //break;         
        }
    });
}
